<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    button {
        width: 30px;
        height: 30px;
        margin-left: 1px;
        background-color: aliceblue;
        background-color: green;
    }

    h3 {
        text-align: center;
        background: #ccc;
        border-radius: 10px;
    }

    #box {
        width: 490px;
        margin: auto;
    }

    table {
        margin-top: 50px;
        margin-left: 180px;
    }

    p {
        width: 100px;
        height: 40px;
        border: 1px solid #000;
    }

    #box2 {
        margin-top: 100px;
        float: left;
    }

    input {
        display: none;
    }

    #quan {
        float: left;
    }

    span {
        float: left;
    }

    .box3 {
        width: 100px;
        margin: auto;
    }
</style>

<body>
    <div id="box">
        <h3>第六号放映厅</h3>
        <table>
            <tr>
                <th><button id="a1"></button>
                    <button id="a2"></button>
                    <button id="a3"></button>
                    <button id="a4"></button>
                </th>
            </tr>
            <tr>
                <td><button id="a5"></button>
                    <button id="a6"></button>
                    <button id="a7"></button>
                    <button id="a8"></button>
                </td>
            </tr>
            <tr>
                <td><button id="a9"></button>
                    <button id="a10"></button>
                    <button id="a11"></button>
                    <button id="a12"></button>
                </td>
            </tr>
        </table>
        <div id="box2">
            <input type="checkbox"><br>
            <p class="p1" style="display:none;">
                一排一座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br>
                 <b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p2" style="display:none;">一排二座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p3" style="display:none;">一排三座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p4" style="display:none;">一排四座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p5" style="display:none;">二排一座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p6" style="display:none;">二排二座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p7" style="display:none;">二排三座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p8" style="display:none;">二排四座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p9" style="display:none;">三排一座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p10" style="display:none;">三排二座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p11" style="display:none;">三排三座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>
            <input type="checkbox"><br>
            <p class="p12" style="display:none;">三排四座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;❌<br><b>10</b>￥</p>

        </div>
    </div>
    <div class="box3">
        <input type="checkbox" style="display: block;" id="quan"><span>全选</span>
        <button style="width:100px;height:50px;background: none;" id="price">计算价格</button>
        <h1></h1>

    </div>
    <script>
        var num = 0;
        var list = []
         //计算所有选中的价格
          $('#price').click(function(){
            var price = $('#box2 input:checked').length;
            var price1 = 0;
            for(var i = 0; i < price; i++){
                price1 += parseInt($('#box2').children('input:checked').eq(i).next().next().children('b').text());
            }
            $('h1').text(price1+"￥");
        })
       // 全选单选
        var quan = $("#quan")
        var dan = $("input")
          
        $('#quan').click(function () {
            for (var a = 0; a < dan.length; a++) {
                dan[a].checked = this.checked
            }
        })
        for (var a = 0; a < dan.length; a++) {
            $('#dan[a]').click(function () {
                var flag = true
                for (var b = 0; b < dan.length; b++) {
                    if (!dan[b].checked) {
                        flag = false
                    }
                    quan.checked = flag
                }
            })
        }

        $("#a1").click(function () {
            $(".p1").css({ display: 'block' })
            $('input:eq(0)').css({ display: 'block' })
        })
        $(".p1").click(function () {
            $('.p1').hide()
            $('input:eq(0)').hide()
        })
        $("#a2").click(function () {
            $('input:eq(1)').css({ display: 'block' })
            $(".p2").css({ display: 'block' })

        })
        $(".p2").click(function () {
            $('.p2').hide()
            $('input:eq(1)').hide()
        })
        $("#a3").click(function () {
            $(".p3").css({ display: 'block' })
            $('input:eq(2)').css({ display: 'block' })
        })
        $(".p3").click(function () {
            $('.p3').hide()
            $('input:eq(2)').hide()

        })
        $("#a4").click(function () {
            $(".p4").css({ display: 'block' })
            $('input:eq(3)').css({ display: 'block' })

        })
        $(".p4").click(function () {
            $('.p4').hide()
            $('input:eq(3)').hide()

        })
        $("#a5").click(function () {
            $(".p5").css({ display: 'block' })
            $('input:eq(4)').css({ display: 'block' })

        })
        $(".p5").click(function () {
            $('.p5').hide()
            $('input:eq(4)').hide()

        })
        $("#a6").click(function () {
            $(".p6").css({ display: 'block' })
            $('input:eq(5)').css({ display: 'block' })

        })
        $(".p6").click(function () {
            $('.p6').hide()
            $('input:eq(5)').hide()

        })
        $("#a7").click(function () {
            $(".p7").css({ display: 'block' })
            $('input:eq(6)').css({ display: 'block' })

        })
        $(".p7").click(function () {
            $('.p7').hide()
            $('input:eq(6)').hide()

        })
        $("#a8").click(function () {
            $(".p8").css({ display: 'block' })
            $('input:eq(7)').css({ display: 'block' })

        })
        $(".p8").click(function () {
            $('.p8').hide()
            $('input:eq(7)').hide()

        })
        $("#a9").click(function () {
            $(".p9").css({ display: 'block' })
            $('input:eq(8)').css({ display: 'block' })

        })
        $(".p9").click(function () {
            $('.p9').hide()
            $('input:eq(8)').hide()

        })
        $("#a10").click(function () {
            $(".p10").css({ display: 'block' })
            $('input:eq(9)').css({ display: 'block' })

        })
        $(".p10").click(function () {
            $('.p10').hide()
            $('input:eq(9)').hide()

        })
        $("#a11").click(function () {
            $(".p11").css({ display: 'block' })
            $('input:eq(10)').css({ display: 'block' })

        })
        $(".p11").click(function () {
            $('.p11').hide()
            $('input:eq(10)').hide()

        })
        $("#a12").click(function () {
            $(".p12").css({ display: 'block' })
            $('input:eq(11)').css({ display: 'block' })

        })
        $(".p12").click(function () {
            $('.p12').hide()
            $('input:eq(11)').hide()

        })



        $('#a1').click(function () {
            $('#a1').css({ background: 'red' })
            $('.p1').click(function () {
                $('#a1').css({ background: 'green' })
            })
        })

        $('#a2').click(function () {
            $('#a2').css({ background: 'red' })
            $('.p2').click(function () {
                $('#a2').css({ background: 'green' })
            })
        })

        $('#a3').click(function () {
            $('#a3').css({ background: 'red' })
            $('.p3').click(function () {
                $('#a3').css({ background: 'green' })
            })
        })

        $('#a4').click(function () {
            $('#a4').css({ background: 'red' })
            $('.p4').click(function () {
                $('#a4').css({ background: 'green' })
            })
        })

        $('#a5').click(function () {
            $('#a5').css({ background: 'red' })
            $('.p5').click(function () {
                $('#a5').css({ background: 'green' })
            })
        })

        $('#a6').click(function () {
            $('#a6').css({ background: 'red' })
            $('.p6').click(function () {
                $('#a6').css({ background: 'green' })
            })
        })

        $('#a7').click(function () {
            $('#a7').css({ background: 'red' })
            $('.p7').click(function () {
                $('#a7').css({ background: 'green' })
            })
        })

        $('#a8').click(function () {
            $('#a8').css({ background: 'red' })
            $('.p8').click(function () {
                $('#a8').css({ background: 'green' })
            })
        })

        $('#a9').click(function () {
            $('#a9').css({ background: 'red' })
            $('.p9').click(function () {
                $('#a9').css({ background: 'green' })
            })
        })

        $('#a10').click(function () {
            $('#a10').css({ background: 'red' })
            $('.p10').click(function () {
                $('#a10').css({ background: 'green' })
            })
        })

        $('#a11').click(function () {
            $('#a11').css({ background: 'red' })
            $('.p11').click(function () {
                $('#a11').css({ background: 'green' })
            })
        })

        $('#a12').click(function () {
            $('#a12').css({ background: 'red' })
            $('.p12').click(function () {
                $('#a12').css({ background: 'green' })
            })
        })


    </script>
</body>

</html>